<template>
	<div id="app">
		<div id="tabbar">
			<router-link to="/">首页</router-link>
			<router-link to="/shopping-cart">购物车</router-link>
			<router-link to="/personal">个人中心</router-link>
		</div>
		<router-view />
	</div>
</template>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	li {
		list-style-type: none;
	}

	@themeColor: #1ba4f0;
	@backColor:#f5f5f5;
	@shenglue:{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.item{
		display: flex;
		box-sizing: border-box;
		padding: 5px;
		img{
			width: 100%;
			height: 100px;
			background-color: @backColor;
		}
		span{
			width: 100%;
			font-size: 16px;
			color: rgba(51,51,51,.8);
			@shenglue()
		}
		.biaoqian{
			display: flex;
			font-size: 10px;
			.b-1{
				padding: 2px;
				border-radius: 2px;
				background-color: rgba(27,164,240,.1);
				color: @themeColor;
			}
			.b-2{
				padding: 2px;
				border-radius: 2px;
				background-color: rgba(247,166,12,.1);
				color: #f0ad16;
				margin-left: 3px;
			}
		}
		.jiage{
			margin-top: 5px;
			display: flex;
			justify-content: space-between;
			.text{
				display: flex;
				.text1{
					color: red;
					font-weight: 700;
					
				}
				.text2{
					color: rgba(16,16,16,.6);
					margin-left: 5px;
					text-decoration: line-through;
				}
			}
		}
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#tabbar {
		width: 100vw;
		height: 50px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #f00;
		position: fixed;
		bottom: 0;
		z-index: 999999;
		background-color: #fff;
		a {
			font-weight: bold;
			color: #2c3e50;
			&.router-link-exact-active {
				color: @themeColor;
			}
		}
	}
</style>
